<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<!--<div id="main" style="width: 600px;height:400px;"></div>-->
<div id="main1" style="width: 600px;height:500px;" ></div>
<script type="text/javascript">
    //各个停车场的累计停车数--------条形图
    $(function () {
        $.ajax({
            type : "get",//向后台请求的方式，有post，get两种方法
            url : "../controller/tb1",//url填写的是请求的路径
            cache: false,
            async: false,
            dataType: 'json',
            data : {

            },
            dataType : 'json',//请求的数据类型
            success : function(data) {//请求的返回成功的方法
                if (data==='') {
                    alert("加载失败");

                } else {
                    alert("加载成功");
                    // for(var i = 0;i<data.length;i++){
                    //     var data11 = data[i];
                    // }
                    tb1(data);
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {//请求的失败的返回的方法
                alert("出异常了");
            }
        });
        function tb1 (data2) {
            option1 = {
                title: {
                    text: '各个停车场累计停车数'
                },
                tooltip: {},
                legend: {
                    data:['停车数']
                },
                xAxis: {
                    data: ["DT1","DT2","DT3"]
                },
                yAxis: {

                },
                series: [{
                    name: '停车数',
                    type: 'bar',
                    data: data2,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 14
                                }
                            }
                        }
                    },
                }]
            }
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main1'));

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option1);
        };
    });
</script>

</body>
</html>